<template>
  <el-dialog
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :title="title"
    width="650px"
    :append-to-body="true"
    center
    @close="doClose"
  >
    <div class="app-container">
      <div class="head-container">
        <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto" @keyup.enter.native="toQuery">
          <el-form-item label="变量名称">
            <el-input v-model="params.variableName" placeholder="请输入" clearable style="width: 150px;" />
          </el-form-item>
          <el-form-item label="属性Key">
            <el-input v-model="params.fieldKey" placeholder="请输入" clearable style="width: 150px;" />
          </el-form-item>
          <el-form-item label="属性名称">
            <el-input v-model="params.fieldName" placeholder="请输入" clearable style="width: 150px;" />
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" style="float:right;margin-left:5px;" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            <el-button size="mini" type="primary" style="float:right;margin-left:5px;" icon="el-icon-search" @click="toQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="padding-top:5px">
        <el-table
          ref="table"
          :data="data"
          :row-key="getRowKeys"
          stripe
          border
          size="mini"
          :height="tableHeight"
          style="width: 100%;"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
          @row-dblclick="doSave"
          @header-dragend="colChange"
        >
          <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
          <el-table-column :show-overflow-tooltip="true" label="变量名称" prop="variableName" :width="colWidths.variableName" />
          <el-table-column sortable label="属性KEY" prop="fieldKey" :width="colWidths.fieldKey" />
          <el-table-column sortable label="属性名称" prop="fieldName" :width="colWidths.fieldName" />
          <el-table-column sortable label="数据类型" prop="dataType" :width="colWidths.dataType">
            <template slot-scope="scope">
              <span>{{ showNameByValue(scope.row.dataType,parent.parent.dataTypes) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-row :gutter="20" style="margin-top:30px;">
      <el-col :span="24">
        <div style="text-align: right;">
          <el-button size="small" @click="doClose()">取消</el-button>
          <el-button type="primary" size="small" @click="doSave()">确定</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import initData from '@/api/coi/initData'
import { parseTime } from '@/utils/index'
import { showNameByValue } from '@/utils/selectUtil'

export default {
  components: { },
  mixins: [initData],
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      syncTime: [],
      ids: [],
      currentObj: this,
      title: '',
      activeName: '1',
      tableHeight: window.innerHeight * 0.30,
      nodeData: null,
      baseUrl: this.parent.parent.baseUrl
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    showNameByValue,
    doLayout() {
      if (this.$refs.table) {
        this.$refs.table.doLayout()
      }
    },
    beforeInit() {
      this.url = process.env.VUE_APP_BASE_API7 + '/ruleVariable/findRuleVariableAndFieldPage'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 列表排序触发
    sortChange(val) {
      const sortCol = val.prop.replace(/([A-Z])/g, '_$1').toUpperCase()
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.params.sort = sortCol + sortType
      this.init()
    },
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    // 查询栏重置触发
    resetForm() {
      this.params = { variableName: null, fieldKey: null, fieldName: null }
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      console.log('handleSelectionChange:')
      if (val.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(val.pop())
      } else {
        this.multipleSelection = val.pop()
      }
    },
    rowClick(row) {
      console.log('rowClick:')
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
    },
    // 关闭
    doClose() {
      this.nodeData = null
      this.$refs.table.clearSelection()
      this.dialog = false
    },
    // 确定
    doSave() {
      console.log('select variable doSave:')
      var _this = this
      if (this.multipleSelection.length <= 0) {
        this.$confirm('请选择变量!', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        })
      } else {
        if (_this.nodeData) {
          if (!_this.nodeData.condition) {
            _this.nodeData.condition = {}
          }
          if (_this.nodeData.condition.variableField && _this.multipleSelection &&
            _this.nodeData.condition.variableField.dataType !== _this.multipleSelection.dataType) {
            _this.nodeData.condition.operator = null
            _this.nodeData.condition.matchValue = null
          }

          _this.nodeData.condition.variableField = _this.multipleSelection
          if (_this.nodeData.condition.variableField) {
            _this.nodeData.condition.variableId = _this.nodeData.condition.variableField.variableId
            _this.nodeData.condition.variableFieldId = _this.nodeData.condition.variableField.variableFieldId
            _this.nodeData.condition.dataType = _this.nodeData.condition.variableField.dataType
          }
          _this.$refs.table.clearSelection(_this.multipleSelection)
        }
      }
      _this.dialog = false
    }
  }
}
</script>
<style scoped>
.sub_table1 >>> .el-table_row>td{
  /* 去除表格线 */
  border: none;
}

.sub_table1 >>> .el-table th.is-leaf {
  /*去除上边框*/
  border: none;
}
.sub_table1 >>> .el-table::before{
  /* 去除下边框 */
  height: 0;
}
.list-operation >>> .el-divider--vertical {
  margin: 0 2px
}
</style>
